<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script>
  <style>
    body,
    ul,
    li {
      margin: 0;
      padding: 0;
    }


    #box {
      position: relative;
      width: 410px;
      height: 570px;
      margin: 10px auto;
    }

    #box li {
      float: left;
      width: 82px;
      height: 190px;
      overflow: hidden;
    }

    #box li img {
      width: 82px;
      height: 190px;
    }

    #box li.hig {
      width: 78px;
      height: 186px;
      overflow: hidden;
      border: 2px dashed yellow;
    }

    #box li.hig img {
      width: 78px;
      height: 186px;
      opacity: 0.5;
      filter: alpah(opacity=50);
    }

    #mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 410px;
      height: 570px;
      background: red;
      opacity: 0;
      filter: alpha(opacity=0);
    }

    input {
      cursor: pointer;
    }

    #photo {
      text-align: center;
      margin: 10px 0;
    }

    #photo img {
      width: 100px;
      height: 100px;
      border-radius: 5px;
      margin: 0 5px;
      opacity: 0.5;
      filter: alpha(opacity=50);
      cursor: pointer;
    }

    #photo img.hover {
      opacity: 1;
      filter: alpha(opacity=100);
    }

    #photo img.selected {
      border: 2px solid yellow;
      width: 96px;
      height: 96px;
      opacity: 1;
      filter: alpha(opacity=100);
    }
  </style>
</head>
<div id="photo">
  <img src="img/girl0/girl.jpg" class="selected">
  <img src="img/girl1/girl.jpg" class="">
</div>
<center><input type="button" value="重新开始"></center>
<ul id="box">
  <li style="top: 0px; left: 0px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/14.png"></li>
  <li style="top: 0px; left: 82px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/10.png"></li>
  <li style="top: 0px; left: 164px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/3.png"></li>
  <li style="top: 0px; left: 246px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/13.png"></li>
  <li style="top: 0px; left: 328px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/9.png"></li>
  <li style="top: 190px; left: 0px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/4.png"></li>
  <li style="top: 190px; left: 82px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/5.png"></li>
  <li style="top: 190px; left: 164px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/6.png"></li>
  <li style="top: 190px; left: 246px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/8.png"></li>
  <li style="top: 190px; left: 328px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/1.png"></li>
  <li style="top: 380px; left: 0px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/2.png"></li>
  <li style="top: 380px; left: 82px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/7.png"></li>
  <li style="top: 380px; left: 164px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/11.png"></li>
  <li style="top: 380px; left: 246px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/12.png"></li>
  <li style="top: 380px; left: 328px; position: absolute; margin: 0px; cursor: move;"><img src="img/girl0/15.png"></li>
</ul>
<script>
  var zIndex = 1;
  window.onload = function () {
    var ophoto = document.getElementById("photo");
    var aThumb = document.getElementsByTagName("img");
    var oBox = document.getElementById("box")
    var aLi = document.getElementsByTagName("li")
    var input = document.getElementsByTagName("input")[0]
    var i = 0;
    var imgPath = 0;
    var oDateStart = null;
    var aPos = [];
    var aData = [];
    for (i = 0; i < 15; i++)aData.push(i + 1)
    console.log(aData)
    for (i = 0; i < aThumb.length; i++) {
      aThumb[i].index = i;
      aThumb[i].onmouseover = function () {
        this.className += "hover"
      };
      aThumb[i].onmouseout = function () {
        this.className = this.className.replace(/hover/, "")
      };
      aThumb[i].onclick = function () {
        for (i = 0; i < aThumb.length; i++)aThumb[i].className = []
        this.className = "selected"
        imgPath = this.index
        oBox.innerHTML = ""
        input.value = "开始游戏"
        createMask()
        aData.sort(function (a, b) { return a - b })
        GAME(false)
      }
    }
    function createMask() {
      var oMask = document.createElement("div");
      oMask.id = "mask";
      oMask.style.zIndex = zIndex;
      oBox.appendChild(oMask)
    }
    createMask()

    function GAME(ran) {
      ran && aData.sort(function (a, b) { return Math.random() > 0.5 ? 1 : -1 })
      var oFragment = document.createDocumentFragment();
      for (i = 0; i < aData.length; i++) {
        var oLi = document.createElement("li");
        var oImg = document.createElement("img")
        oImg.src = "img/girl" + imgPath + "/" + aData[i] + ".png";
        oLi.appendChild(oImg)
        oFragment.appendChild(oLi)
      }
      oBox.appendChild(oFragment);
      oBox.style.background = "url(img/girl" + imgPath + "/bg.png) no-repeat";

      for (i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
        aLi[i].style.top = aLi[i].offsetTop + "px";
        aLi[i].style.left = aLi[i].offsetLeft + "px";
        aPos.push({ "left": aLi[i].offsetLeft, "top": aLi[i].offsetTop })
      }

      for (i = 0; i < aLi.length; i++) {
        aLi[i].style.position = "absolute";
        aLi[i].style.margin = "0";
        drag(aLi[i])
      }
    }

    function drag(obj, handle) {
      var handle = handle || obj;
      handle.style.cursor = "move"
    }
  }
</script>


</body>

</html>